<template>
  <div class="state" v-if="this.stateInfo.length">
    <aplayer v-show="false" ref="audio" :music="{
      src: '/static/video/message.wav',
    }">
    </aplayer>
    <el-table v-if="som"
        :data="this.stateInfo.filter(data => !search || data.userMobile.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pagesize,currentPage*pagesize)"
        style="width: 100%">
        <el-table-column align="center" prop="orderNumber" label="订单号" width="150"></el-table-column>
        <!-- <el-table-column prop="orderpro" label="服务项目"></el-table-column> -->
        <el-table-column align="center" prop="orderCreateTime" label="订单日期" width="150"></el-table-column>
        <el-table-column align="center" prop="userName" label="联系人" width="80"></el-table-column>
        <el-table-column align="center" prop="userMobile" label="联系电话"></el-table-column>
        <el-table-column align="center" prop="userAddress" label="联系地址"></el-table-column>
        <el-table-column align="center" prop="addressStatus" label="地址状态"

        
          :filters="[{ text: '普通地址', value: '普通地址' }, { text: '管家地址', value: '管家地址' }]"
          :filter-method="addressTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
          <p>{{scope.row.addressStatus == 9 ? '管家地址': '普通地址'}}</p>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="orderType" label="订单类型"
          :filters="[{ text: '免费保洁', value: '免费保洁' }, { text: '维修', value: '维修' }, { text: '保洁', value: '保洁' }]"
          :filter-method="orderTag"
          filter-placement="bottom-end">
          <template slot-scope="scope">
          <!-- {{scope.row.orderType}} -->
          {{ orderTypeInfo(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="orderstatus" label="订单状态"
          :filters="[{ text: '正在派单', value: '正在派单' }, { text: '已派单', value: '已派单' }, { text: '正在服务', value: '正在服务' }, { text: '服务完成', value: '服务完成' }]"
          :filter-method="orderStata"
          filter-placement="bottom-end">
            <template slot-scope="scope">
              <el-tag 
                    :type="orderstatusInfo(scope.row) === '正在派单' ? 'primary' :(orderstatusInfo(scope.row) === '服务完成' ? 'info' : (orderstatusInfo(scope.row) === '正在服务' ? 'success' : 'warning'))"
                    disable-transitions>{{orderstatusInfo(scope.row)}}</el-tag>
            </template>
        </el-table-column>
        <el-table-column align="center" prop="scheduledTime" label="预约时间"  width="140"></el-table-column>
        <el-table-column align="center" prop="arriveTime" label="预计到达"  width="150">
          <template slot-scope="scope"><el-button type="text">{{ scope.row.arriveTime }}</el-button></template>  
        </el-table-column>    
        <el-table-column  align="center" label="操作" width="200">
          <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            :key="scope.row"
            placeholder="输入联系电话 搜索"/>

        </template>
          <template slot-scope="scope">
              <el-button
              size="mini"
              type="warning"
              @click="handleFind(scope.$index, scope.row)">查看</el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination v-if="som"
      class="fenye"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pagesize"
        layout="total, prev, pager, next"
        :total="totalList">
      >
    </el-pagination>    
    <router-view />
  </div>
</template>

<script>
/* eslint-disable */
import Aplayer from 'vue-aplayer'
import { mapState, mapActions } from 'vuex'
export default {
  components: {
          Aplayer
  },
  created(){
    this.getStateInfo().then(() => {
      this.websocketFun();
    })
  },
  data() {
    return {
      flag:false,
      pagesize:15,
      som : true,
      search: '',
      currentPage: 1
    }
  },
  computed:{
    // this.stateInfo.filter(data => !search || data.userName.toLowerCase().includes(search.toLowerCase())).slice((currentPage-1)*pagesize,currentPage*pagesize)
    ...mapState({
        stateInfo: state => state.stateModule.stateInfo
    }),
    totalList(){
      let length = this.stateInfo.length;
      return length;
    },
    orderTypeInfo(){
      return (item) => {
        if(item.orderType === 0){
          return '免费保洁'
        }else if( item.orderType === 1 ){
          return '维修'
        }else{
          return '保洁'
        }
      }
    },
    orderstatusInfo(){
      return (item) => {
        if(item.orderStatus === 1){
          return '正在派单'
        }else if( item.orderStatus === 2 ){
          return '已派单'
        }else if( item.orderStatus === 3 ){
          return '正在服务'
        }else{
          return '服务完成'
        }
      }
    }
    // addressStatusInfo(){
    //   return (addressStatus) => {
    //     if(addressStatus === 9){
    //       return '管家地址'
    //     }else{
    //       return '普通地址'
    //     }
    //   }
    // }
  },
  methods:{
    ...mapActions({
      getStateInfo:'stateModule/getStateInfo'
    }),
    handleFind(index, row){
      this.$router.push({path:'/state/find',query:{orderNumber:row.orderNumber}})
    },
    orderStata(value, row) {
      return this.orderstatusInfo(row) === value;
    },
    orderTag(value,row){
      return this.orderTypeInfo(row) === value;
    },
    addressTag(value, row){
      if(row.addressStatus == 9){
        return '管家地址' == value
      }else{
        return '普通地址' == value
      }
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
    },
    websocketFun(){
      var that = this;
      var socket;
      var accessToken = this.$cookies.get('accessToken');
      if(typeof(WebSocket) == "undefined") {
            // console.log("您的浏览器不支持WebSocket");
        }else{
            // console.log("您的浏览器支持WebSocket");
            //实现化WebSocket对象，指定要连接的服务器地址与端口  建立连接
            let socketUrl = "ws://zgh.zg-weilaijia.com/webSocket/"+accessToken;
            socket = new WebSocket(socketUrl);
            //打开事件
            socket.onopen = function() {
                // alert("Socket 已打开");
                //socket.send("这是来自客户端的消息" + location.href + new Date());
            };
            //获得消息事件
            socket.onmessage = function(msg) {
              // console.log(msg.data);
                if(msg.data != 'success'){
                  //声音
                  let aplayer = that.$refs.audio;
                  aplayer.play();

                  that.$notify({
                  title: '订单消息',
                  message: msg.data,
                  duration: 0,
                  position: 'bottom-right',
                  type: 'success'
                });
                } 
            };
            //关闭事件
            socket.onclose = function() {
                that.websocketFun();
            };
            //发生了错误事件
            socket.onerror = function() {
                that.$alert("Socket发生了错误,请刷新").then(()=>{
                  that.$route.go(0);
                });
                //此时可以尝试刷新页面
            }
            //离开页面时，关闭socket
            //jquery1.8中已经被废弃，3.0中已经移除
            // $(window).unload(function(){
            //     socket.close();
            //});
        }
    }
  },      
  // 路由守卫判断 是否进入详情页,隐藏添加客服按钮
  beforeRouteUpdate(to, from, next){
      if((to.path !== '/state')&&(from.path === '/state')){
          this.som = false;
      }else{
          this.som = true;
      }
      next();
  },
  //不是详情页刷新页面，隐藏添加客服按钮
  mounted(){
      if(this.$route.path !== '/state'){
          this.som = false;
      }
  }
}
</script>

<style lang="scss" scoped>
.state{
  width: 100%;
  background: #fff;
  padding: 10px;
  box-sizing: border-box;
  text-align: center;
}

</style>

